<template>
	<view class="content">
		<view class="syjh">
			<button type="default">剩余{{number}}次刮奖机会</button>
		</view>
		<view class="ggle">
			<view class="chouj">
				<view style="position: relative;width:100%;height:100%">
					<view v-if="showcj" id="gift" class="gift">点我刮奖</view>
					<view v-else id="gift2" class="ggll gift2">
						<view v-if="prizeType == 1" style="color:#000;">
							恭喜您获得 <text style="color:#ff7044">“{{array[luckNuber].points}}元积分”</text>
						</view>
						<view v-if="prizeType == 2" style="color:#000;">
						恭喜您获得 <text style="color:#ff7044">“{{array[luckNuber].points}}元红包”</text>
						</view>
						<view v-if="prizeType == 3" style="color:#000;">
							恭喜您获得 <text style="color:#ff7044">“{{array[luckNuber].goods_name}}”</text>
						</view>
						<view @click="gotTicket" v-if="prizeType == 4" style="color:#000;">
							 获得代金券一张
						</view>
						<!-- <view class="">
							请在 “我的-商城积分” 中查看
						</view> -->
						<view @click="cshua" class="buton">
							再来一次
						</view>
						
						<view v-if="prizeType == 4" @click="gotTicket" class="buton">
							立即使用
						</view>
						<view v-else class="buton" @click="TosetAdd()">
							选择收货地址
						</view>
					</view>
					<canvas class="canvas" @touchstart="start" @touchend="end" @touchmove="move" canvas-id="firstCanvas"></canvas>
				</view>
				<image class="img1" src="../static/images/ggl/yun1.png" mode=""></image>
				<image class="img2" src="../static/images/ggl/yun2.png" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 250rpx;">
			
		</view>
		<!-- <view class="lipzs">
			<button type="default">礼品展示</button>
		</view>
		<view class="youhui">
			<view class="yh1">
				<view class="">
					<image src="../../static/images/ggl/yhj.png" mode=""></image>
				</view>
				<view class="">
					商城购物优惠券
				</view>
			</view>
			<view class="yh2">
				<view class="">
					<image src="../../static/images/ggl/scjf.png" mode=""></image>
				</view>
				<view class="">
					商城积分
				</view>
			</view>
			<view class="yh3">
				<view class="">
					<image src="../../static/images/ggl/dkj.png" mode=""></image>
				</view>
				<view class="">
					购物抵扣红包
				</view>
			</view>
		</view> -->
		
		<view class="guize">
			<view class="Myprize" @click="Myprize()">
				我的奖品
			</view>
			<view class="">
				|
			</view>
			<view class="" @click="activityRules()">
				活动规则
			</view>
		</view>
	</view>
</template>

<script>
	var ctx;
	var sx = 0,
	sy = 0,
	perNum = 0;
	var giftWidth=0,giftHeight=0;	
	var canvasId = "firstCanvas";
	 // #ifdef H5
	 	const share = require("@/store/share.js")
	 // #endif
	export default {
		data() {
			return {
				voucher:"",
				prizetype:0,
				id:0,
				array:[],
				number:0,
				luckNuber:0,
				w: 275,
				h: 115,
				isfinish:false,
				isClear:false,
				backgroundImage: require('../static/images/ggl/zzc.png'),
				showcj:true,
				transPixels:[],
				isDisable:false,
				lid:"",
				aid:""
			}
		},
		onReady: function() {
			this.createCtx();
			this.giftWidth();
		},
		onLoad(options) {
			this.id=options.id
		
			this.getInfo()
			this.getfrequency()
			if(options.lid&&options.aid){
				this.lid=options.lid;
				this.aid=options.aid;
				this.setadderss();
			}
			
			
		},
		methods: {
			gotTicket(){
				let store_id = this.voucher.voucher_t_store_id
				let voucher_t_range =this.voucher.voucher_t_range
				let voucher_t_rangeid =this.voucher.voucher_t_rangeid
				let gc_name =this.voucher.gc_name
				console.log(store_id,voucher_t_range,voucher_t_rangeid,gc_name)
				var that=this	
				if(voucher_t_range==0){
					if(store_id){
						uni.navigateTo({
							url:"/pages/store/store?store_id="+store_id
						})
					}else{
						uni.switchTab({
							url:"/pages/home/index"
						})
					}
					
				}else if(voucher_t_range==1){//商品
					if(voucher_t_rangeid){
						uni.navigateTo({
							url:"/pages/distribution/shopInfo?goods_id="+voucher_t_rangeid.split(",")[0]
						})
					}
			
				}else if(voucher_t_range==2){//分类
					uni.navigateTo({
						url:"/pagesA/pages/list/productsLists_sx_xz?thirdid="+voucher_t_rangeid+"&index="+gc_name
					})
				}
			
			},
			setadderss(){//设置收货地址
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=sendinfo_save',
					method: 'post',
					data: {
						lid:this.lid,
						aid:this.aid,
					},
				}).then((res)=> {
					if(res.error_code==0){
						uni.showToast({
							title:"设置成功",
							icon:"none"
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			Myprize(){
				uni.navigateTo({
					url:"MyPrize"
				})
			},
			activityRules(){
				uni.navigateTo({
					url:"activityRules"
				})
			},
			TosetAdd(){//去设置地址
				uni.navigateTo({
					url:"/pages/car/address?type=squeegee&lid="+this.lid+"&id="+this.id
				})			
			},
			getfrequency(){
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=canDrawCount',
					method: 'get',
					data: {
						id:this.id
					},
				}).then((res)=> {
					this.number=res.message.left_count
				});
			},
			getInfo(){
				//九宫格数据
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=index',
					method: 'get',
					data: {
						id:this.id
					},
				}).then((res)=> {
					if(res.error_code == 0 && res.datas.info.activity_type == 3){
						this.array =res.datas.info.items
						this.id=res.datas.info.id
						this.info =res.datas.info
						// #ifdef H5
							let shareInfo={
								title: this.info.bigwheel_title , // 分享标题
								desc: this.info.share_desc, // 分享描述  
								link:  this.$share+"/#/pagesA/pages/prizeDraw/squeegee?id="+this.id, // 分享链接  
								imgUrl: this.info.share_img, // 分享图标       
							}
								share.share(shareInfo)
						// #endif
					}
				})
			},
			cshua:function(){
				this.isDisable=false
				this.showcj=true;
				this.isfinish=false
				this.isClear=false
				this.w=270;
				this.h=110;
				sx=0;
				sy=0;
				perNum=0;
				giftWidth=0;
				giftHeight=0;
				this.transPixels=[];
				 ctx.restore();//恢复上面保存的画布内容
				this.createCtx();
				// this.giftWidth();				
			},
			giftWidth:function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#gift').boundingClientRect(data => {
					giftWidth=data.width;
					giftHeight=data.height;
				}).exec();
			},
			finish:function(){
				this.isfinish=true;
			},
			done:function(){
				uni.showToast({
					title:"刮奖成功！"
				});
			},
			start: function(e) {
				if(this.isfinish){
					if(!this.isClear){
						this.isClear=true;
						this.done();
						ctx.moveTo(0, 0);
						ctx.clearRect(0,0, this.w, this.h);
						ctx.stroke()
						ctx.draw(true);
						this.showcj=false;
					}
					return false;
				} 
				sx = e.touches[0].x;
				sy = e.touches[0].y;
				console.log(e.touches[0].x + "  " + e.touches[0].y)
				this.getFilledPercentage();
				
			},
			end: function(e) {
				ctx.draw(true);
				if(this.isfinish) return false;
				
			},
			move: function(e) {
				if(this.isfinish){
					if(!this.isClear){
						this.isClear=true;
						this.done();
						ctx.moveTo(0, 0);
						ctx.clearRect(0,0, this.w, this.h);
						ctx.stroke()
						ctx.draw(true);
						this.showcj=false;
					}
					
					return false;
				} 
				ctx.moveTo(sx, sy); 
				ctx.clearRect(sx, sy, 20, 20) 
				ctx.stroke()
				// ctx.globalAlpha = 1;

				ctx.draw(true);
				this.getFilledPercentage();
				  
				sx = e.touches[0].x;
				sy = e.touches[0].y;
			},
			createCtx: function() {
				ctx = uni.createCanvasContext(canvasId);
				this.createRect();
			},
			createRect: function() {
				ctx.setFillStyle('rgba(158,158,158,.52)');
				ctx.fillRect(0, 0, this.w, this.h);
				ctx.draw(true);
			},
			getFilledPercentage: function() {
				var that=this;
				uni.canvasGetImageData({
					canvasId: canvasId,
					x: (that.w-giftWidth)/2-5,
					y: (that.h-giftHeight)/2-5,
					width: giftWidth,
					height: giftHeight,
					success: function(res) {
						let pixels = res.data;
						let trans=that.transPixels;
						for (let i = 0; i < pixels.length; i += 4) {
							if (pixels[i + 3] < 128) {
								trans.push(pixels[i + 3]);
							}
						}
						perNum = (trans.length / (pixels.length / 4) * 100).toFixed(2);
						if(perNum>=2000){	
							if(that.isDisable){
								return false;
							}
							that.isDisable=true
							//触发
							that.$util.request({
								url: '/mobile/index.php?act=bigwheel&op=prize_num',
								method: 'post',
								data: {
									"id":that.id
								},
							}).then((res)=> {
								if(res.error_code == 0){	
									that.lid=res.message.lid
									that.voucher=res.message.voucher									
									that.luckNuber=res.message.prize_level
									if(Number(that.array[that.luckNuber].receivetype)>1){
										that.prizeType=that.array[that.luckNuber].receivetype	
									}else if(Number(that.array[that.luckNuber].points) == 0){
										that.prizeType=5
									}else{
										that.prizeType=1
									}
									 if(that.number>0){
										 that.number--;
									 }
									that.finish();	
								}else{
									that.isDisable=false
									uni.showToast({
										title:res.message,
										icon:"none"
									})
								}
							})
						}
					}
				});

			},
	}
	}
</script>

<style>
	.content{
		box-sizing: border-box;
		/* overflow-x:hidden; */
		 background: url("../static/images/ggl/bg.png") no-repeat center top;
		background-size: cover;
	}
	.ggll{
		background-color: #fff;
	}
	.guize{
		display: flex;
		color:pink;
		font-size:26upx;
		justify-content: center;
		margin-top:60upx;
		padding-bottom:30upx;
	}
	.guize view{
		padding:0 40upx;
	}
	.youhui{
		display: flex;
		font-size:24upx;
		color:pink;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}
	.youhui>view>view:first-of-type{
		height:150upx;
		line-height: 150upx;
		margin-top: 40rpx;
	}
	.youhui .yh1 image{
		width:144upx;
		height:69upx;
	}
	.youhui .yh2 image{
		width:141upx;
		height:117upx;
	}
	.youhui .yh3 image{
		width:96upx;
		height:109upx;
	}
	.lipzs{
		text-align: center;
	}
	.lipzs button{
		color:#fff;
		display: inline-block;
		background-color: #fd9fe2;
		width:230upx;
		height:65upx;
		font-size:28upx;
		border-radius: 0upx;
		margin:40upx 0;
	}
	.ggle{
		text-align: center;
		overflow-x: hidden; 
	}
	.chouj image{
		position: absolute;
		width:252upx;
		height:75upx;
		z-index: 99;
	}
	.chouj .img1{
		top:198upx;
		left:-88upx;
	}
	.chouj .img2{
		top:198upx;
		right:-88upx;
	}
	.chouj{
		display:inline-block;
		position: relative;
		background:#fd4667;
		padding:20upx;
		/* text-align: center; */
		margin:0 auto;
		width:550upx;
		height:230upx;
		box-shadow: 15.733upx -19.429upx 27upx 0upx rgba(215, 0, 47, 0.55);
	}
	.syjh{
		text-align: center;
		padding-top:400upx;
		padding-bottom:100upx;
	}
	.syjh button{
		background-image: -moz-linear-gradient( 90deg, rgb(255,117,143) 0%, rgb(255,138,170) 100%);
		background-image: -webkit-linear-gradient( 90deg, rgb(255,117,143) 0%, rgb(255,138,170) 100%);
		background-image: -ms-linear-gradient( 90deg, rgb(255,117,143) 0%, rgb(255,138,170) 100%);
		box-shadow: 0px 8px 6.65upx 0.35upx rgba(193, 21, 41, 0.16);
		/* position: absolute;
		left: 1403px;
		top: 492px; */
		width: 304upx;
		color:#fff;
		display: inline-block;
		height: 83upx;
		line-height: 83upx;
		font-size:32upx;
		border-radius: 40upx;
	}
	.buton{
		color:#fff;
		background-color: #ff4769;
		/* display: inline-block; */
		width:150upx;
		height:50upx;
		margin: 10rpx auto;
		border-radius: 25upx;
		line-height: 50upx;
	}
	.gift2{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -276upx;
		margin-top: -116upx;
		color:#bebebe;
		font-size: 46upx;
		box-sizing:border-box;
		text-align:center;
		width:100%;
		height:100%;
		line-height: 65upx;
		z-index:10;
	}
	.gift2>view:first-of-type{
		font-size:28upx;
	}
	.gift2>view:nth-child(2){
		font-size:22upx;
	}
	.gift2>view:last-of-type{
		font-size:19upx;
	}
	.gift {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -76upx;
		margin-top: -25upx;
		color:#bebebe;
		font-size: 46upx;
		box-sizing:border-box;
		text-align:center;
	}
	.canvas{
		width:550upx;
		height:230upx;
		margin: 0 auto;
	}
</style>
